<template>
  <div>用户管理</div>

  <el-button @click="drawer = true">添加</el-button>

  <el-table :data="showTableData" style="width: 100%; height: 500px">
    <el-table-column prop="adminid" label="用户id" width="180" />
    <el-table-column prop="adminname" label="用户名" width="180" />
    <el-table-column prop="role" label="角色" width="180"> </el-table-column>

    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    style="margin-top: 20px"
    :pageSize="pageSize"
    v-model:current-page="pageNum"
    @change="pageChange"
  />

  <el-drawer
    v-model="drawer"
    title="I am the title"
    direction="rtl"
    :before-close="handleClose"
  >
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="用户名">
        <el-input v-model="form.adminname" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" type="password" />
      </el-form-item>
      <el-form-item label="角色">
        <el-select
          v-model="form.role"
          placeholder="Select"
          size="large"
          style="width: 240px"
        >
          <el-option :label="'超级管理员'" :value="1" />
          <el-option :label="'管理员'" :value="2" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script lang="ts" setup>
import { userAddReq, userDelReq, userListReq } from '@/api/user'
import { ref, computed } from 'vue'

// 分页
const total = ref<number>(0)
const pageSize = ref<number>(2)
const pageNum = ref<number>(1)

const showTableData = computed(() => {
  //pageNum 1  pageSzie 2   0-1
  //pageNum 2  pageSzie 2    2-3
  return tableData.value.slice(
    (pageNum.value - 1) * pageSize.value,
    pageSize.value * pageNum.value,
  )
})

function pageChange() {
  console.log(pageNum.value)
}

const drawer = ref(false)
const form = ref({ adminname: '', password: '', role: 1 })
function handleClose() {
  console.log('handleClose')
  drawer.value = false
}

const tableData = ref<Array<IUserItem>>([])

async function loadList() {
  const r = await userListReq()
  console.log(r.data)
  tableData.value = r.data.data

  //记录总数
  total.value = tableData.value.length
}
loadList()

async function handleDelete(i, row) {
  console.log('删除', row.adminid)
  await userDelReq(row.adminid)
  loadList()
}

async function onSubmit() {
  console.log('发布')
  console.log(form.value)
  await userAddReq(form.value.adminname, form.value.password, form.value.role)
  //隐藏弹框-刷新列表
  drawer.value = false
  loadList()

  form.value = { adminname: '', password: '', role: 1 }
}
</script>
<style lang=""></style>
